<template>
  <div class="iot_UpBox">
    <img src="../assets/icons/logo/logo.png" alt="">
    <div class="iot_UpSearch">
        <UpSearch></UpSearch>
        <div class="iot_head" @click="showPopup">
            <div></div>
            <span>{{ UserName || '点击登录'}}</span>
        </div>
    </div>
    <van-popup v-model:show="show" :style="{ padding: '20px' }">
        <LoginPage></LoginPage>
    </van-popup>
  </div>
</template>

<script>
    import { computed, inject, ref } from 'vue';
    import UpSearch from './UpSearch.vue'
    import LoginPage from './LoginPage.vue';
    export default {
        name:'UpNav',
        components:{
            UpSearch,
            LoginPage
        },
        setup(){
            const Goods = inject('Goods')
            let UserName = computed(()=>{
                if(Goods[15]){
                    return Goods[15].username
                }else{
                    return false
                }
            })
            const show = ref(false)
            const showPopup = () =>{
                show.value = true
            }
            return {show,showPopup,UserName}
        }
    }
</script>

<style scoped>
    .iot_UpBox{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .iot_UpBox img{
        margin:0 30px 0 20px;
    }
    .iot_UpSearch{
        flex: 1;
        display: flex;;
        align-items: center;
        justify-content: space-between;
    }
    .iot_head{
        display:flex;
        align-content: center;
        margin: 0 20px;
        cursor: pointer;
    }
    .iot_head div{
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background-color: #fff;
        background-image: url(../assets/icons/logo/headSculpture.png);
        background-size: 30px 30px;
        background-position: 5px 5px;
        background-repeat: no-repeat;
        margin: 0 10px;
    }
    .iot_head span{
        width: 120px;
        line-height: 40px;
        color: #fff;
        font-size: 17.5px;
    }
    .van-popup{
        border-radius: 5px;
    }
</style>